(function () {

	//声明一个datepicker对象
	var datePicker = {};
	var monthDate;
	var oUiDatePickerWrapper;

	//获取日历数据
	datePicker.getMonthData = function (year,month) {
		if(typeof year === 'undefined' || typeof month === 'undefined'){
			var currentTime = new Date();
			year = currentTime.getFullYear();
			month = currentTime.getMonth();
			day   = currentTime.getDate();
		}

		// console.log(year,month)
		//获取当前月份
		var currentDate = new Date(year, month, 1);
		//获取当前月份的1号是星期几
		var currentWeek = currentDate.getDay();

		//获取当前月份的最后一天（即可知道当月总天数）
		var currentTotalDate = new Date(year, month + 1, 0);  //下个月的第0天也就是当月的最后一天
		var currentTotalDays = currentTotalDate.getDate();   //当月总天数

		//判断会出现上个月几天
		var preDate = new Date(year, month - 1, 1);
		var preDays = currentWeek - 1;

		//判断上个月总共有多少天
		var preTotalDate = new Date(year, month, 0);
		var preTotalDays = preTotalDate.getDate();

		var dateArr = [];

		// 循环填充上个月数据
		for(var i = currentWeek - 2; i >= 0; i--) {
			dateArr.push('<span>' + (preTotalDays - i) + '</span>');
		}
		// 循环填充当月数据
		for(var i = 1; i <= currentTotalDays; i++) {
			if(i == day){
				dateArr.push('<span class="active">' + i + '</span>');
			} else {
				dateArr.push(i);
			}
		}
		//循环填充下个月数据
		var nextDays = 42 -  dateArr.length;
		for(var i = 1; i <= nextDays;i++){
			dateArr.push('<span>' + i + '</span>');
		}
		return {
			year: year,
			month: month + 1,
			currentWeek: currentWeek,
			currentTotalDays: currentTotalDays,
			dateArr: dateArr
		}
	}
	datePicker.buildUi = function (year,month) {
		//获取返回出来的数据
		monthDate = datePicker.getMonthData(year,month);
		//es6拼接字符串
		/*var sHtml = `<div class="ui-datepicker-header">
			<a href="javascript:;" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>
			<span class="datepicker-curr-month">${monthDate.year}-${monthDate.month + 1}</span>
			<a href="javascript:;" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>
		</div>
		<div class="ui-datepicker-body">
			<table>
				<thead>
					<tr>
						<th>一</th>
						<th>二</th>
						<th>三</th>
						<th>四</th>
						<th>五</th>
						<th>六</th>
						<th>日</th>
					</tr>
				</thead>
				<tbody>`;

		for(var i = 0; i < monthDate.dateArr.length; i++) {
			if(i % 7 == 0) {
				sHtml += `<tr>`;
			}
			sHtml += `<td>${monthDate.dateArr[i]}</td>`;
			if(i % 7 == 6) {
				sHtml += `</tr>`;
			}
		}
		sHtml += `</tbody>
			</table>
		</div>`;*/
		Handlebars.registerHelper("sevenOpen", function (v, options) {
			if(v % 7 == 0){
				return options.fn(this);
			}
		});

		Handlebars.registerHelper("sevenClose", function (v, options) {
			if(v % 7 == 6){
				return options.fn(this);
			}
		});
		//用模板引擎handlebars
		var t = $('#dateTime-template').html();
		var f = Handlebars.compile(t);
		var h = f(monthDate);

		oUiDatePickerWrapper = document.getElementsByClassName('ui-datepicker-wrapper')[0];
		oUiDatePickerWrapper.innerHTML =  h;
	}

	datePicker.controlDri = function (direction) {
		var year,month,currentWeek,currentTotalDays;
		if(monthDate){
			year = monthDate.year;
			month = monthDate.month;
		}
		if (direction == 'prev') {
			month--;
			if(month == 0) {
				month = 12;
				year--;
			}
		} else if(direction == 'next'){
			month++;
			if(month == 13) {
				month = 1;
				year++;
			}
		}
		datePicker.buildUi(year,month - 1);
	}

	datePicker.init = function () {
		datePicker.buildUi();
		var year,month,currentWeek,currentTotalDays;
		if(monthDate){
			year = monthDate.year;
			month = monthDate.month;
			currentWeek = monthDate.currentWeek;
			currentTotalDays = monthDate.currentTotalDays;
		}
		//循环去掉所有的td的样式
		oUiDatePickerWrapper.addEventListener('click',function(ev){
            var oTarget = ev.target;
            //点击左右按钮，上一月,下一月
            if(oTarget.classList.contains('ui-datepicker-prev-btn')){
                datePicker.controlDri('prev');

            }else if(oTarget.classList.contains('ui-datepicker-next-btn')){
                datePicker.controlDri('next');
            }
        },false);

		//利用事件委托给每个td加点击事件
		oUiDatePickerWrapper.addEventListener('click',function (ev) {
			var ev = ev || window.event;
			var oTarget = ev.target;
			var dateArr = [];
			if(monthDate){
				dateArr = monthDate.dateArr;
			}
			if(oTarget.tagName.toLocaleLowerCase() == 'td'){
				return false;
			}
		},false);
		/*var aTd = oUiDatePickerWrapper.getElementsByTagName('td');
        for (i = 0; i < aTd.length; i++) {
        	aTd[i].index = i;
        	aTd[i].onclick = function () {
	        	for (j = 0; j < aTd.length; j++) {
		        	aTd[j].className = '';
		        }
		        if(this.index < currentWeek - 1) {
		        	month--;
					if(month == 0) {
						month = 12;
						year--;
					}
					datePicker.buildUi(year,month - 1);
		        } else if (this.index > currentTotalDays + currentWeek - 2) {
		        	month++;
					if(month == 13) {
						month = 1;
						year++;
					}
					datePicker.buildUi(year,month - 1);
		        } else {
		        	this.className = 'checked';
		        }
	        }
        }*/
	}
	datePicker.init();
})();